<template>
	<view class="content">
			<u-navbar title="我的积分" bgColor="#07c160" :placeholder="true" :border="false" leftIconColor="#fff" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }" @leftClick="back"></u-navbar>
		<image src="../../static/images/bg3.png" mode="widthFix" class="bg_img" style="top:inherit"></image>
		<view class="klc">
			<view class="klc_tit">总积分</view>
			<view class="klc_num">530</view>
		</view>
		<view class="opl">
			<view class="opl_sm">
				<view class="opl_text">消费获得积分</view>
				<view class="opl_tit">256</view>
			</view>
			<view class="opl_sm">
				<view class="opl_text">储蓄获得积分</view>
				<view class="opl_tit">256</view>
			</view>
			<view class="opl_sm">
				<view class="opl_text">开卡获得积分</view>
				<view class="opl_tit">0</view>
			</view>
		</view>
		
		<view class="label">
			积分明细  <view style="font-size:25upx;color:#999">（展示近2个月明细）</view>
		</view>
		<view class="klp">
			<view class="log">
				<view class="log_view">
					<view class="log_view_left">时长积分</view>
					<view class="log_view_right">+30</view>
				</view>
				<view class="log_view log_view2">
					<view class="log_view_left">2022-06-15  10:39</view>
					<view class="log_view_right"> 在线5.0小时</view>
				</view>
			</view>
			<view class="log">
				<view class="log_view">
					<view class="log_view_left">时长积分</view>
					<view class="log_view_right">+30</view>
				</view>
				<view class="log_view log_view2">
					<view class="log_view_left">2022-06-15  10:39</view>
					<view class="log_view_right"> 在线5.0小时</view>
				</view>
			</view>
		</view>
		
		
		<view class="jv" @click="exf">兑换项目</view>
		
	</view>
</template>

<script>
	export default{
		data (){
			return {
				
			}
			},
			methods:{
				back (){
					uni.navigateBack(-1)
				},
				change (index){
					this.current=index;
				},
				exf (){
					uni.navigateTo({
						url:'/pagesA/redeem/redeem'
					})
				}
			}
			}
</script>

<style>
	.content{
		width: 100%;
		min-height: 100vh;
		height:100%;
		background-color: #f7f7f7;
		padding-bottom:30upx;
	}
	.fixed_tp{
		position: relative;
		padding-top: var(--status-bar-height);
		background-color: inherit;
	}
	.klc{
		width: 90%;
		margin:80upx auto;
		color:#fff;
		position: relative;
	}
	.klc_num{
		font-size:60upx;
		margin-top:10upx;
		font-weight: 700;
	}
	.opl{
		width:88%;
		margin:-20upx auto ;
		padding:20upx 20upx 50upx 20upx;
		background-color: #fff;
		position: relative;
		border-radius: 10upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.opl_sm{
		width:33%;
		text-align: center;
		margin-top:30upx;
	}
	.opl_text{
		color:#999;
		font-size:25upx;
	}
	.opl_tit{
		font-weight: 700;
		margin-top:10upx;
		font-size:38upx;
	}
	.label{
		width:90%;
		margin:60upx auto 30upx;
		display: flex;
		align-items: center;
		font-weight: 700;
	}
	.klp{
		width:80%;
		margin:0 auto;
		padding:40upx;
		background-color: #fff;
		border-radius: 10upx;
	}
	.log{
		padding:30upx 0;
		border-bottom:1px solid #ededed;
	}
	.log_view{
		display: flex;
		justify-content: space-between;
	}
	.log_view2{
		color:#999;
		font-size:25upx;
		margin-top:10upx;
	}
	.jv{
		background-color: #07c160;
		color:#fff;
		text-align: center;
		padding:20upx 0;
		border-radius: 100upx;
		width:92%;
		margin:50upx auto;
	}
</style>